<template>
	<view class="comment-list">
		<view class="comment-item" v-for="item in commentList" :key="item.comment_id">
			<view class="comment-box">
				<view class="avatar">
					<image :src="item.user.avatar ? item.user.avatar:require('@/static/images/profile/avator.png')" mode="" style="width: 40px;height: 40px;"></image>
				</view>
				<view class="content">
					<u--text :text="item.user.nickname" type="primary" bold size="17"></u--text>
					<u--text margin="0 0 8px 0" :text="item.content"></u--text>
					<u-album :urls="item.image_url" multipleSize="80" :rowCount="3"></u-album>
					<view class="setting">
						<view class="time">
							{{$u.timeFrom(item.create_time)}}
						</view>
						<view class="support" @click="supportClick(item.comment_id)">
							<image
								:src="item.is_support ? require('@/static/images/profile/community/support.png'):require('@/static/images/profile/community/no_support.png')"
								mode="" class="support-img"></image>
							<text>{{item.support_count}}人点赞</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			commentList: {
				type: Array,
				default () {
					return []
				}
			},
		},
		data() {
			return {
				
			};
		},
		methods:{
			supportClick(comment_id){
				this.$emit('support',comment_id)
			},
		},
		created() {
			console.log(this.commentList);
		}
	}
</script>

<style lang="scss">
	.comment-list {
		padding: 30upx;

		.comment-item {
			padding-top: 20upx;
			border-bottom: 1upx solid #e6e6e6;
		}

		.comment-box {
			display: flex;
			align-items: flex-start;

			.avatar {
				background-color: #FFFFFF;
				padding: 5px;
				border-radius: 3px;
			}

			.content {
				margin-left: 10px;
				flex: 1;
			}

			.setting {
				height: 80upx;
				line-height: 80upx;
				display: flex;
				justify-content: space-between;

				.time {
					font-size: 20upx;
					color: #999;
				}

				.support {
					padding: 0 25upx;
					display: flex;
					align-items: center;
					font-size: 26upx;
					color: #666;

					.support-img {
						width: 40upx;
						height: 40upx;
					}
				}
			}
		}
	}
</style>
